<template>
  <div class="pd-30">
    <el-form :rules="rules" ref="ruleForm" :model="formData" label-width="80px" style="width: 700px">
      <el-form-item label="活动事项" prop="title">
        <el-input v-model="formData.title" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="活动时间" prop="activityTime">
        <el-date-picker
            v-model="formData.activityTime"
            value-format="timestamp"
            type="datetimerange"
            range-separator="至"
            start-placeholder="活动开始日期"
            end-placeholder="活动结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动地址" prop="activityAddress">
        <el-input v-model="formData.activityAddress" maxlength="50" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="活动人数" prop="num_of_people">
        <el-radio-group v-model="formData.num_of_people">
          <el-radio label="3-10"></el-radio>
          <el-radio label="11-50"></el-radio>
          <el-radio label="51-100"></el-radio>
          <el-radio label="101-200"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="需要签到" prop="signin_require">
        <el-radio-group v-model="formData.signin_require">
          <el-radio-button :label="1">是</el-radio-button>
          <el-radio-button :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="概述">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 5}"
            v-model="formData.overview"
            maxlength="400"
            show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ActivityPost",
  data() {
    let validateTime = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择活动时间'));
      } else {
        if (value[0] - value[1] > 0) {
          callback(new Error('结束时间需在开始时间点之后'))
        } else if (value[1] - value[0] === 0) {
          callback(new Error('结束时间与开始时间一致'))
        } else {
          callback();
        }
      }
    }
    return {
      formData: {
        title: '',
        activityTime: [], // 活动时间
        activityAddress: '', // 活动地址
        num_of_people: '', // 活动人数
        signin_require: 0, // 是否需要签到
        overview: '' // 概述
      },
      rules: {
        title: [
          {required: true, message: '请输入活动事项', trigger: 'blur'},
        ],
        activityTime: [
          {validator: validateTime, trigger: 'change'},
        ],
        activityAddress: [
          {required: true, message: '请输入活动地址', trigger: 'blur'},
        ],
        num_of_people: [
          {required: true, message: '请选择活动人数', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    resetForm() {
      this.formData = {
        title: '',
        activityTime: [], // 活动时间
        activityAddress: '', // 活动地址
        num_of_people: '', // 活动人数
        signin_require: 0, // 是否需要签到
        overview: '' // 概述
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let {title, activityTime, activityAddress, num_of_people, signin_require, overview} = this.formData;
          this.$store.dispatch('activity/addActivity', {
            title,
            society_id: this.$store.getters.society_id,
            start_time: activityTime[0],
            end_time: activityTime[1],
            num_of_people,
            signin_require,
            activity_address: activityAddress,
            overview
          }).then(
              () => {
                this.$message.success('成功')
              }
          )
        }
      });
    },
  }
}
</script>

<style scoped>

</style>